<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import { computed } from 'vue'
import { useDeviceStore } from '@/stores/useDeviceStore.ts'
import { mdRoutes } from '@/router'
import { generateNavItems } from '@/utils/NavUtil'

const route = useRoute()
const router = useRouter()
const deviceStore = useDeviceStore()
const isMenuOpen = ref(false)

// 生成导航项
const navItems = computed(() => generateNavItems(mdRoutes))

const navigateTo = (path: string) => {
  if (isMenuOpen.value) {
    isMenuOpen.value = !isMenuOpen.value
  }
  // 确保路径以斜杠结尾
  const normalizedPath = path.endsWith('/') ? path : `${path}/`
  router.push(normalizedPath)
}

const isActive = (path: string) => {
  // 如果当前路由路径与导航项路径完全匹配，或者当前路由路径以导航项路径开头（且后面跟着斜杠）
  // 则认为该导航项处于选中状态
  return route.path === path || (route.path.startsWith(path) && route.path[path.length] === '/')
}
</script>

<template>
  <div class="navbar-whole">
    <nav class="navbar-container" v-if="!deviceStore.isMobile">
      <div class="navbar-left logo" @click="navigateTo('/')">
        <img
          src="https://github.com/8cmcy8/tuchuang/blob/main/img/%E8%BE%89%E5%A4%9C%E6%9A%97.jpg?raw=true"
          alt="picture"
          style="height: 50px; width: 50px; border-radius: 50%"
          v-memo="[]"
        />
        <span class="website-title">挥洒吧这就是青春</span>
      </div>
      <div class="navbar-middle">
        <div
          v-for="item in navItems"
          :key="item.path"
          class="navbar-item"
          :class="{ active: isActive(item.path) }"
          @click="navigateTo(item.path)"
        >
          {{ item.title }}
        </div>
        <div class="navbar-right logo">
          <span>cmcy</span>
          <img
            src="https://github.com/8cmcy8/tuchuang/blob/main/img/%E8%BE%89%E5%A4%9C.jpg?raw=true"
            alt="picture"
            style="height: 50px; width: 50px; border-radius: 50%"
            v-memo="[]"
          />
        </div>
      </div>
    </nav>
    <nav class="navbar-container-mobile" v-else>
      <div class="navbar-left-mobile logo" @click="navigateTo('/')">
        <img
          src="https://github.com/8cmcy8/tuchuang/blob/main/img/%E8%BE%89%E5%A4%9C%E6%9A%97.jpg?raw=true"
          alt="picture"
          style="height: 50px; width: 50px; border-radius: 50%"
          v-memo="[]"
        />
        <span class="website-title">挥洒吧这就是青春</span>
      </div>
      <div class="navbar-right-mobile logo" @click="isMenuOpen = !isMenuOpen">
        <div v-show="!isMenuOpen" class="hamburger">🍔</div>
        <div v-show="isMenuOpen" class="hamburger">❌</div>
      </div>
    </nav>
    <div
      v-show="isMenuOpen && deviceStore.isMobile"
      class="mobile-menu"
      :class="{ open: isMenuOpen }"
    >
      <div class="mobile-menu-content">
        <div
          v-for="item in navItems"
          :key="item.path"
          class="navbar-item-mobile"
          @click="navigateTo(item.path)"
        >
          {{ item.title }}
        </div>
        <div class="navbar-right-mobile logo">
          <span>cmcy</span>
          <img
            src="https://github.com/8cmcy8/tuchuang/blob/main/img/%E8%BE%89%E5%A4%9C.jpg?raw=true"
            alt="picture"
            style="height: 50px; width: 50px; border-radius: 50%"
            v-memo="[]"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.navbar-whole {
  background-color: #ffffff;
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #e5e7eb;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
}

.website-title {
  font-family: 'Pacifico', 'Cookie', 'Lobster', cursive;
  font-weight: 700;
  font-size: 1.5rem;
}

.navbar-container,
.navbar-container-mobile {
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  font-size: 1rem;
}

.navbar-left,
.navbar-left-mobile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.navbar-middle {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.navbar-item {
  white-space: nowrap;
  text-align: center;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease;
  cursor: pointer;
}

.navbar-item.active,
.navbar-item:hover {
  color: #3a8ee6;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  margin-left: auto;
}

.navbar-right span {
  font-family: 'Alex Brush', cursive;
  font-weight: 700;
  font-size: 1.5rem;
}

.navbar-right-mobile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

.navbar-right-mobile span {
  font-family: 'Alex Brush', cursive;
  font-weight: 700;
  font-size: 1.8rem;
}

.hamburger {
  font-size: 2rem;
}

.logo:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.logo:active {
  transform: scale(0.95);
}

.mobile-menu {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 1000;
}

.mobile-menu-content {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 24px 0 96px;
  max-width: 288px;
  text-align: center;
}

.navbar-item-mobile {
  font-size: 1.5rem;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e7eb;
  color: #2c3e50;
  font-weight: 700;
  cursor: pointer;
}
</style>
